<template>
  <div class="wrapper">
    <div class="comments"
         v-for="item of list"
         :key="item.id"
         border-bottom-1px>
      <div class="author-img"
           v-if="item.avatar">
        <img :src="item.avatar"
             alt=""
             class="img">
      </div>
      <div>
        <div class="author">{{item.nickname}}</div>
        <div class="content">{{item.content}}</div>
        <ul class="img-list">
          <li v-for="(innerItem, index) of item.img"
              :key=index
              @click="handleClick(item.img)"
              class="comment-item">
            <img :src="innerItem"
                 alt=""
                 class="img-content"
                 @click="handleShowList(index)">
          </li>
        </ul>
        <div class="time">{{item.create_at}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery'
import { mapActions } from 'vuex'
export default {
  name: 'CommonComments',
  components: {
    CommonGallery
  },
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    handleShowList (index) {
      let isShow = true
      this.changeDetailIsShow(isShow)
      this.changeIndex(index)
    },
    handleClick (innerItem) {
      this.gallery(innerItem)
    },
    ...mapActions({
      gallery: 'GalleryList',
      changeIndex: 'changeIndex',
      changeDetailIsShow: 'changeDetailIsShow'
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.comments
  padding()
  padding-top 10px
  padding-bottom 24px
  display flex
  background-color $bgcWh
  align-items center

  .author-img
    margin-right 20px
    min-width 100px
    width 60px
    height 60px

    img
      border-radius 50%
      width 100%

  .author
    line-height 45px
    font-size $fzFourthly
    color $grayThird

  .content
    line-height 50px
    color $blackone
    font-size $fzFourthly

  .img-list
    display flex
    flex-wrap wrap
    margin-bottom 20px

    li
      margin-right 20px

      .img-content
        width 100px
        height 100px

  .time
    font-size $smallFz
    color $graySeventh
    line-height 38px

.img-swiper
  position relative
</style>
